{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9b9e0023-f927-4d71-8a9e-44985f8eaf49",
   "metadata": {},
   "outputs": [],
   "source": [
    "!pip install ollama"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "de8c0513-4ee5-4253-a8e3-b566c862dd7c",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "-----------------------------------------\n",
      "下面是五子棋游戏的基本结构，包含了棋盘、玩家选项和移动功能。\n",
      "\n",
      "```html\n",
      "<!DOCTYPE html>\n",
      "<html lang=\"zh-CN\">\n",
      "<head>\n",
      "    <meta charset=\"UTF-8\">\n",
      "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",
      "    <title>五子棋</title>\n",
      "    <style>\n",
      "        /* CSS样式 */\n",
      "        body {\n",
      "            font-family: Arial, sans-serif;\n",
      "            text-align: center;\n",
      "        }\n",
      "        \n",
      "        #game-board {\n",
      "            border: 1px solid black;\n",
      "            padding: 20px;\n",
      "            display: inline-block;\n",
      "        }\n",
      "        \n",
      "        .piece {\n",
      "            width: 20px;\n",
      "            height: 20px;\n",
      "            font-size: 16px;\n",
      "            line-height: 20px;\n",
      "            color: #000;\n",
      "            text-align: center;\n",
      "            border-radius: 50%;\n",
      "        }\n",
      "        \n",
      "        .black-piece {\n",
      "            background-color: black;\n",
      "        }\n",
      "        \n",
      "        .white-piece {\n",
      "            background-color: white;\n",
      "        }\n",
      "        \n",
      "        .selected-piece {\n",
      "            border: 2px solid blue;\n",
      "        }\n",
      "    </style>\n",
      "</head>\n",
      "<body>\n",
      "    <h1>五子棋</h1>\n",
      "    <button id=\"reset-button\"> reset </button>\n",
      "    <div id=\"game-board\">\n",
      "        <!-- Chessboard will be generated here -->\n",
      "    </div>\n",
      "    <script>\n",
      "        // JavaScript代码\n",
      "        const board = [];\n",
      "        for (let i = 0; i < 8; i++) {\n",
      "            row = [];\n",
      "            for (let j = 0; j < 8; j++) {\n",
      "                piece = '';\n",
      "                if (i === 1 && j >= 1 && j <= 7) {\n",
      "                    piece += '<span class=\"black-piece\" style=\"top: 20px;\" onclick=\"makeMove(1, ' + j + ')\">;</span>';\n",
      "                } else if (j === 0 || i === 6 && j >= 1 && j <= 7) {\n",
      "                    piece += '<span class=\"white-piece\" style=\"bottom: 10px;\" onclick=\"makeMove(' + i + ', ' + j + ')\"></span>';\n",
      "                }\n",
      "                row.push(piece);\n",
      "            }\n",
      "            board.push(row.join(''));\n",
      "        }\n",
      "        \n",
      "        const gameBoard = document.getElementById('game-board');\n",
      "        let currentPlayer = 'black';\n",
      "        let selectedPiece = null;\n",
      "        \n",
      "        // Generate chessboard\n",
      "        for (let i = 0; i < 8; i++) {\n",
      "            const row = document.createElement('div');\n",
      "            row.innerHTML = board[i];\n",
      "            gameBoard.appendChild(row);\n",
      "        }\n",
      "        \n",
      "        function makeMove(row, col) {\n",
      "            if (selectedPiece === null && currentPlayer === 'black') {\n",
      "                selectedPiece = { row, col };\n",
      "            } else if (selectedPiece !== null && currentPlayer === 'white') {\n",
      "                removeSelectedPiece();\n",
      "                // Add logic for white player's move\n",
      "                alert('White player\\'s turn');\n",
      "            }\n",
      "        }\n",
      "        \n",
      "        function removeSelectedPiece() {\n",
      "            const piece = document.querySelector('.black-piece' + ' .selected-piece');\n",
      "            if (piece !== null) {\n",
      "                piece.remove();\n",
      "            } else {\n",
      "                piece = document.querySelector('.white-piece' + ' .selected-piece');\n",
      "                if (piece !== null) {\n",
      "                    piece.remove();\n",
      "                }\n",
      "            }\n",
      "            selectedPiece = null;\n",
      "        }\n",
      "        \n",
      "        // Add event listener for reset button\n",
      "        const resetButton = document.getElementById('reset-button');\n",
      "        resetButton.addEventListener('click', function() {\n",
      "            removeSelectedPiece();\n",
      "            currentPlayer = 'black';\n",
      "            selectedPiece = null;\n",
      "        });\n",
      "    </script>\n",
      "</body>\n",
      "</html>\n",
      "```\n",
      "\n",
      "上述代码为您提供了一个基本的五子棋游戏结构，包含了Chessboard、玩家选项和移动功能。要添加更多的逻辑和特性，请修改相应的JavaScript代码。\n",
      "\n",
      "-----------------------------------------\n",
      "总耗时：40358807100\n",
      "-----------------------------------------\n"
     ]
    }
   ],
   "source": [
    "import ollama\n",
    "\n",
    "prompt = \"\"\"请帮我用 HTML 生成一个五子棋游戏，所有代码都保存在一个 HTML 中。\"\"\"\n",
    "stream = ollama.chat(\n",
    "    stream=True,\n",
    "    model='llama3.2:latest', # 修改大模型名称1\n",
    "    messages=[\n",
    "        {\"role\": \"system\", \"content\": \"你是一个专业的 Web 开发助手，擅长用 HTML/CSS/JavaScript 编写游戏。\"},\n",
    "        {\"role\": \"user\", \"content\": prompt}\n",
    "    ]\n",
    ")\n",
    "\n",
    "\n",
    "print('-----------------------------------------')\n",
    "for chunk in stream:\n",
    "    if not chunk['done']:\n",
    "        print(chunk['message']['content'], end=\"\", flush=True)\n",
    "        #print(chunk['response'], end='', flush=True)\n",
    "    else:\n",
    "        print('\\n')\n",
    "        print('-----------------------------------------')\n",
    "        print(f'总耗时：{chunk['total_duration']}')\n",
    "        print('-----------------------------------------')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "53262722-7429-4722-8228-24f568669896",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.13.5"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
